<template>
  <view class="image-download-container">
    <view class="page-title">图片下载与预览</view>
    
    <!-- 下载按钮 -->
    <button class="download-btn" @click="downloadImage" :disabled="isDownloading">
      {{ isDownloading ? '下载中...' : '下载图片' }}
    </button>
    
    <!-- 下载进度显示 -->
    <view class="progress" v-if="isDownloading">
      下载进度：{{ downloadProgress }}%
    </view>
    
    <!-- 错误提示 -->
    <view class="error" v-if="errorMsg">
      {{ errorMsg }}
    </view>
    
    <!-- 图片显示区域 -->
    <view class="image-preview" v-if="localImagePath">
      <text class="preview-title">下载完成，预览如下：</text>
      <image 
        :src="localImagePath" 
        mode="widthFix" 
        class="show-image"
        @error="imageLoadError"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg",
      localImagePath: "", // 本地存储的图片路径
      isDownloading: false, // 下载状态标记
      downloadProgress: 0, // 下载进度（0-100）
      errorMsg: "" // 错误提示信息
    };
  },
  methods: {
    // 下载图片核心方法
    downloadImage() {
      // 重置状态
      this.isDownloading = true;
      this.downloadProgress = 0;
      this.errorMsg = "";
      this.localImagePath = "";

      // 调用uni.downloadFile下载图片（支持进度监听）
      uni.downloadFile({
        url: this.imageUrl,
        timeout: 30000, // 30秒超时保护
        // 监听下载进度
        onProgressUpdate: (res) => {
          this.downloadProgress = res.progress; // 进度百分比（0-100）
          // 打印进度log（控制台可见）
          console.log(`图片下载进度：${res.progress}%，已下载：${(res.totalBytesWritten / 1024 / 1024).toFixed(2)}MB，总大小：${(res.totalBytesExpectedToWrite / 1024 / 1024).toFixed(2)}MB`);
        },
        success: (downloadRes) => {
          this.isDownloading = false;
          // 下载成功（状态码200）
          if (downloadRes.statusCode === 200) {
            console.log("图片下载成功，本地临时路径：", downloadRes.tempFilePath);
            // 保存图片到本地（可选，不保存则直接使用tempFilePath）
            uni.saveImageToPhotosAlbum({
              filePath: downloadRes.tempFilePath,
              success: () => {
                console.log("图片已保存到相册");
                this.localImagePath = downloadRes.tempFilePath; // 赋值用于显示
              },
              fail: (saveErr) => {
                console.log("保存相册失败，直接使用临时路径显示：", saveErr);
                this.localImagePath = downloadRes.tempFilePath; // 临时路径也可显示
              }
            });
          } else {
            this.errorMsg = `下载失败，状态码：${downloadRes.statusCode}`;
            console.error("图片下载失败：", downloadRes);
          }
        },
        fail: (err) => {
          this.isDownloading = false;
          this.errorMsg = err.errMsg.includes("timeout") ? "下载超时，请检查网络" : "下载失败，请重试";
          console.error("图片下载失败：", err);
        }
      });
    },
    // 图片加载失败处理
    imageLoadError() {
      this.errorMsg = "图片预览失败，请重新下载";
      console.error("图片加载失败，本地路径：", this.localImagePath);
    }
  }
};
</script>

<style scoped>
.image-download-container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 40rpx;
}

.download-btn {
  width: 100%;
  max-width: 500rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 16rpx;
  background-color: #409eff;
  color: #fff;
  border: none;
  margin-bottom: 20rpx;
}

.download-btn::after {
  border: none;
}

.progress {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.error {
  font-size: 28rpx;
  color: #f56c6c;
  margin-bottom: 30rpx;
  text-align: center;
  padding: 0 20rpx;
}

.image-preview {
  width: 100%;
  margin-top: 30rpx;
}

.preview-title {
  font-size: 30rpx;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.show-image {
  width: 100%;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}
</style>